<template>
	<view class="opinion personal container">
		<view class=" header uni-flex uni-row flex-between nav-shadow">
			<uni-nav-bar title="意见反馈">
				<template slot='left'>
					<view class="flex width-100">
						<i class='iconfont iconfanhui' link @click='goBack()'></i>
					</view>
				</template>
			</uni-nav-bar>
		</view>
		<view class="position-r-top">
			<view class="opinion-content bg-w p-20">
			<view class="fb margin-b-10 color-3c">
				请填写反馈信息
			</view>
				<view class="opinion-top uni-textarea">
				<textarea maxlength="300" class="opinion-text fz-14" auto-height value="" v-model="opinionForm.content" :placeholder="message" />
				</view>
			<view class="opinion-bottom">
				<view class="fb margin-b-10 margin-t-10 color-3c">
					上传图片或短视频
				</view>
				<view class="overflow-h">
					<view class="add-list">
						<view class="add-list-box ">
							<view class="float-l text-a-c margin-b-10 item-img" v-for="(item,index) in addList" :key="index">
								<view class="item-box">
									<image v-if="!item.type" :src="item.url" class="img-100" mode="" link @click="preImg(item.url)"></image>
									<video :id="`video${index}`" v-else :src="item.url" :loop="true" class="img-100" :controls="true" :show-center-play-btn="true"  :enable-play-gesture="true" >
										<cover-view class="coversvideo img-100" @click="preVideo(`video${index}`)">
										</cover-view>
									</video>
								</view>
								<view class="delete" link @click="deleteItem(index)">
									删除
								</view>
							</view>
							<view v-if="showAdd" class="add-item flex-center-h algin-i-c flex fz-22 fb color-3c" link @click="chooseVideoImage">+
							</view>
						</view>
						
					</view>
					
				</view>
			</view>
			</view>
		</view>
	    
		<view class="save-btn flex">
			<button type="default" link @click="saveOpinion">提交反馈</button>
		</view>
	</view>
</template>

<script>
	import {upload,save} from '@/common/api/profile.js'
	import ipConfig from '@/utils/ipconfig.js'
	export default {
		data() {
			return {
				message:'请详细描述使用过程中带来的不便：1.哪个模块的功能2.遇到什么问题/使用不便注：提交后，开发团队会对您反馈的建议进行评估，评估通过会在后续版本更新上线。',
			    imgList:[],
				videoList:[],
				addList:[],
				showAdd:true,
				count:12,//上传限制
				uploads:{},
				uploadData:null,
				opinionForm:{
					annexList:[],
					content:''
				}
			}
		},
		methods: {
			chooseVideoImage(){
				uni.showActionSheet({
					// title:"选择上传类型",
					itemList:['图片','视频','请选择上传类型'],
					popover:{
						height:200
					},
					success: (res) => {
						console.log(res.tapIndex)
						// res.tapIndex ? this.chooseVideo() : this.chooseImage();
						switch(res.tapIndex){
							case 0 : this.chooseImage();
							break;
							case 1 :this.chooseVideo();
							break;
						}
					}
				})
			},
			chooseImage(){
				
				uni.chooseImage({
					count:1,
					// sizeType:['original', 'compressed'],
					sourceType:['album','camera'],
					success: (res) => {
						uni.uploadFile({
							url: ipConfig.ip + 'admin/sys-file/upload?path=opinion', 
							method:'POST',
							filePath: res.tempFilePaths[0],
							name: 'file',
							header: {'Authorization': 'Bearer '+ uni.getStorageSync('token')},
							success: (res1) => {
								console.log(res1);
								if(res1.statusCode == 200){
									console.log(JSON.parse(res1.data));
									this.uploadData = JSON.parse(res1.data).data;
									this.imgList = [];
									this.imgList = this.imgList.concat(res.tempFilePaths);
									let img=[]
									this.imgList.map(item => {
										img.push(Object.assign({},{type:0,url:item,id:this.uploadData.id}))
									})
									setTimeout(()=>{
										this.showAdd = this.addList.length == this.count ? false :true;
										this.addList = this.addList.concat(img);
										console.log(this.addList);
										
									},100)
								}
							}
						});						
					}
				})
			},
			chooseVideo(){
				uni.chooseVideo({
					maxDuration:40,
					// sourceType:['album','camera'],
					success: (res) => {
						uni.uploadFile({
							url: ipConfig.ip + 'admin/sys-file/upload?path=opinion', 
							filePath: res.tempFilePath,
							name: 'file',
							method:'POST',
							header: {'Authorization': 'Bearer '+ uni.getStorageSync('token')},
							success: (res1) => {
								console.log(res1);
								if(res1.statusCode == 200){
									console.log(JSON.parse(res1.data));
									this.uploadData = JSON.parse(res1.data).data;
									this.videoList = [];
									this.videoList = this.videoList.concat(res.tempFilePath) ;
									let video=[];
									this.videoList.map(item => {
										video.push(Object.assign({},{type:1,url:item,id:this.uploadData.id}))
									})
									setTimeout(()=>{
									this.addList = this.addList.concat(video) ;
									this.showAdd = this.addList.length == this.count ? false :true;
									console.log(this.addList);
									})
								}
							}
						});	
						
					}
				})
			},
			deleteItem(n){
				uni.showModal({
					title:"提示",
					content:"是否删除?",
					success: (res) => {
						if(res.confirm){
							this.addList.splice(n,1);
						}
						console.log(this.addList);
					}
				})
			},
			preImg(url){
				let urls = this.addList.filter(item => !item.type).map(item => item.url);
				uni.previewImage({
					current:0,
					urls:urls
				})
			},
			preVideo(index){
				console.log(index);
				let currentVideo = uni.createVideoContext(index);
				currentVideo.requestFullScreen();
				currentVideo.play();
				
			},
			saveOpinion(){
				this.opinionForm.annexList = [];
				this.addList.map(item => {
					this.opinionForm.annexList.push(Object.assign({},{fileId:item.id},{fileType:item.type}))
				})
				 console.log(this.opinionForm);
				 // return
				save(this.opinionForm).then(res => {
					if(res.code === "20000"){
						uni.showToast({
							title:"保存成功",
							duration:2000
						})
						
						setTimeout(()=>{
							this.addList = [],
							this.opinionForm.content = '';
							uni.navigateBack({
								delta:1
							})
						},500)
					}else{
						uni.showToast({
							title:res.message,
							icon:"none",
							duration:2000
						})
					}
				})
			}
		}
	}
</script>

<style>
.uni-actionsheet .uni-actionsheet__cell, .uni-actionsheet .uni-actionsheet__title{
	display: flex;
	height: 120rpx;
	justify-content: center;
	align-items: center;
}
.item-img{margin-right: calc(calc(100% - 300px) / 5);}
.overflow-h{height: 170px;overflow: auto;}
.opinion-text{height: 250px!important;background-color: #f2f2f2;}
.item-box,.add-item{width: 60px;height: 60px;box-sizing: border-box;background-color: #f2f2f2!important;}
.add-list-box{overflow: auto;}
.add-item{background-color: transparent;}
.item-box{position: relative;}
.delete{border: 1rpx solid #ff7c3a;color: #ff7c3a;}
.save-btn{position: fixed;bottom: 10px;left: 0;right: 0;padding: 0 10px;z-index: 1;}
.save-btn button{width: 100%;background-color: rgba(9, 170, 233, 1);color: #fff;}
</style>
